<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      #canvas {
          background: #f1f1f1;
      }
  </style>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<span style="font-size: 16px">Hello world</span>
<script>
    window.onload = () => {
        const canvas = document.getElementById('canvas')
        const ctx = canvas.getContext('2d')
        // 绘制矩形
        const drawImage = () => {
            const img = new Image()
            img.src = 'https://net-cloud.xhey.top/shareJigsaw/photos/72DD7D6A-5D34-4BA5-A564-4248A21BE8CC.jpg'
            img.onload = ()=>{
                // drawImage(image, x, y) 其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。
                ctx.drawImage(img,0,0)
            }
        }
        // drawImage()

        function drawImage2() {
            var ctx = document.getElementById('canvas').getContext('2d');
            var img = new Image();
            img.onload = function(){
                ctx.drawImage(img,0,0);
                ctx.beginPath();
                ctx.moveTo(30,96);
                ctx.lineTo(70,66);
                ctx.lineTo(103,76);
                ctx.lineTo(150,10);
                ctx.lineTo(170,15);
                ctx.stroke();
            }
            img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
        }
        // drawImage2()


        function drawImage3() {
            var ctx = document.getElementById('canvas').getContext('2d');
            var img = new Image();
            img.onload = function(){
                for (var i=0;i<4;i++){
                    for (var j=0;j<3;j++){
                        // drawImage(image, x, y, width, height)
                        // 这个方法多了2个参数：width 和 height，这两个参数用来控制 当向canvas画入时应该缩放的大小
                        ctx.drawImage(img,j*50,i*38,50,38);
                    }
                }
            };
            img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
        }
        drawImage3()
    }

</script>
</body>
</html>
